<style lang="less" scoped>
  @import "../assets/css/config.less";
  .el-dropdown-link {
    cursor: pointer;
    color: @color1;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .opinion-type{
    margin-bottom:12px;
    position:relative;
    bottom:28px
  }
  .opinion-type-title{
    position:absolute;
    font-weight: 1000;
  }
  .el-dropdown-link{
    position:relative;
    right:200px;
  }
  .dialog-footer{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .cancel{
      height: 32px;
      width: 60px;
      outline: none;
      border: 1px solid @color1;
      background-color: @color6;
      color: @color1;
      border-radius: 4px;
      cursor: pointer;
      &:hover{
        border: 1px solid @color1;
        background-color: @color2;
        color: @white;
      }
      &:active{
        border: 1px solid @color1;
        background-color: @color3;
        color: @white;
      }
    }
    .confirm{
      height: 32px;
      width: 60px;
      margin: 0 0 0 15px;
      outline: none;
      border: 1px solid @color1;
      background-color: @color1;
      color: @white;
      border-radius: 4px;
      cursor: pointer;
      &:hover{
        border: 1px solid @color1;
        background-color: @color2;
      }
      &:active{
        border: 1px solid @color1;
        background-color: @color3;
      }
    }
  }
        
</style>
<style lang="less">
  @import "../assets/css/config.less";
  .el-dropdown-menu__item:not(.is-disabled):hover{
    color: @color2!important;
    background-color: @hover-bgc;
  }
</style>

<template>
  <div id="index">
    <el-dialog title="用户反馈" :visible="showComt" :show-close="show_modal" :modal="showComt" style="width:1480px">
      <div class="opinion-type" >
        <p class="opinion-type-title">请选择反馈类别：</p>
        <el-dropdown @command="handleCommand" class="el-dropdown-link">
          <span >
            {{opinionType}} <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="题目错误">题目错误</el-dropdown-item>
            <el-dropdown-item command="网站bug">网站bug</el-dropdown-item>
            <el-dropdown-item command="网站优化">网站优化</el-dropdown-item>
            <el-dropdown-item command="出题建议">出题建议</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <p class="opinion-type-title" style="margin-top:4px">反馈内容：</p>
      </div>
        
      <div ref="comment"  style="text-align:left"></div>
      <span class="dialog-footer">
        <button class="cancel" @click="cancel">取消</button>
        <button class="confirm" @click="submit">提交</button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import header from "../components/header.vue";
import E from "wangeditor";
import { addOneConnect} from "../api/api";
export default {
  name: "connectUs",
  data: function() {
    return {
      menu: [],
      // point:{},
      questions: [],
      showComt:true,
      show_modal:false,
      editorContent:'',
      userGroup:'',
      postOrNot:true,
      insertIndex:-1,
      posting_id:'',
      opinionType:'反馈类别'
    }
  },
  mounted() {
    this.user = JSON.parse(this.$store.state.user);
    // this.point = this.$route.params.point;
    setTimeout(()=>{
      var editor = new E(this.$refs.comment);
      editor.customConfig.onchange = html => {
          this.editorContent = html;
      };
      var url = "";
      if (process.env.NODE_ENV === "development") {
          url = "http://localhost:8080/api/uploadImg";
      } else if (process.env.NODE_ENV === "production") {
          url = "https://www.ourspark.org/api/uploadImg";
      }
      editor.customConfig.uploadImgServer = url; // 上传图片到服务器
      editor.customConfig.zIndex = 0;
      editor.create();
      editor.txt.html("");
    },10)
    // let point = this.$route.params.point;
  },
  methods: {
    handleCommand(command) {
      this.opinionType = command
    },
    cancel() {
      // this.$router.go(-1);
      this.$emit('cancel')
    },
    submit(){
      if(this.opinionType === '反馈类别') {
        this.$alert('请选择反馈类别！', '提示');
      } else if (this.editorContent === '') {
        this.$alert('反馈内容不能为空哦！', '提示');
      }else{
        this.showComt = false;
        let targetGroup = [];
        switch(this.opinionType){
          case "网站优化":
            targetGroup = ["1"];
            break;
          case "网站bug":
            targetGroup = ["1"];
            break;
          case "题目错误":
            targetGroup = ["2", "3"];
            break;
          case "出题建议":
            targetGroup = ["2", "3"];
            break;
        }
        addOneConnect({
          // menu: this.point.menu,
          // point_id: this.point._id,
          authorUUID:  JSON.parse(this.$store.state.user).UUID,
          authorUsername:  JSON.parse(this.$store.state.user).username,
          authorRole: this.user.userGroup,
          time: (new Date()).getTime(),
          type: this.opinionType,
          content: this.editorContent,
          targetGroup: targetGroup
        })
        .then(response => {
        if (response.state === true) {
          this.$Message.success("提交反馈成功");
          this.$emit('cancel')
        } else {
          this.$Message.error("提交反馈失败！ " + response.msg);
        }
        })
        .catch(error => {
            this.$Message.error(error.status);
        });
      } 
    }
  }
}
</script>